<template>
    <div class="login-container">
        <el-form ref="login-form" :model="user" :rules="loginForm" label-width="0px" class="login-form">
            <!-- 登录log -->
            <div class="login-head"></div>
            <!--配置form表单验证
                  1.必须给 el-form组件绑定 model为表单数据对象
                  2.给需要验证的表单项el-form-item 绑定prop属性
                  3.给 el-form组件的rules属性，配置验证规则对象
                  // 手动触发一次表单验证，防止空内容直接登录
                  1. 给el-form设置 ref属性
                  2. 通过ref 获取el-form组件，调用组件的validate()进行验证
            -->
            <el-form-item prop="mobile">
                <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-form-item prop="isAgree">
                <!-- `checked` 为 true 或 false -->
                <el-checkbox v-model="user.isAgree"></el-checkbox>
                我已阅读并同意用户协议和隐私条款
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="onLogin" class="loginBtn" :loading="loginLoading">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { logins } from '@/api/user'
  export default {
    data () {
      return {
        user: {
          mobile: '13911111111', // 手机号码框
          code: '246810', // 验证码框
          isAgree: false // 登录协议
        },
        // checked: true,
        loginLoading: false, // 登录的loading状态
        loginForm: {
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '验证码不能为空', trigger: 'change' },
            { pattern: /^\d{6}$/, message: '验证码格式错误', trigger: 'blur' }
          ],
          isAgree: [
            {
              // 自定义校验规则 返回布尔值
              // 验证通过：callback()
              // 验证失败：callback(new Error('错误消息'))
              validator: (rule, value, callback) => {
                // console.log(rule)
                // console.log(value)
                if (value) {
                  callback() // 验证通过
                } else {
                  callback(new Error('错误消息'))
                }
              },
              // message: '请勾选用户协议再登录',
              trigger: 'change'
            }
          ]
        }
      }
    },
    methods: {
      onLogin () {
        // 获取表单数据(根据接口要求绑定数据)
        // const user = this.user
       // 表单验证
       // console.log(this.$refs['login-form'])
       this.$refs['login-form'].validate((valid, err) => {
        // console.log(valid)
        // console.log(err)
        // 验证失败直接返回
        if (!valid) {
          return
        }
        // 验证通过发送请求
        this.login()
       })

        // 表单验证
        // 验证通过，提交数据
        // 处理后端响应结果
        //      成功：xxx
        //      失败：xxx
      },
      login () {
        // 开启登录中loading...
        this.loginLoading = true
        // 发送请求
        // 发送请求
        logins(this.user).then(res => {
            // console.log(res)
             this.$message({
              message: '登录成功!',
                center: true
              })
              // 请求成功关闭loading
              this.loginLoading = false
              // 将接口返回的用户相关数据放到本地存储中，方便应用数据共享
              // 本地存储需要存储字符串
              // 如要存储对象、数组类型的数据，则把他们转为string再进行存储
              window.localStorage.setItem('user', JSON.stringify(res.data.data))
              // 跳转到首页 两种写法
              // this.$router.push('/')
              this.$router.push({
                name: 'home'
              })
        }).catch(err => {
          console.log(err)
          this.$message.warning('登录失败，手机号或验证码错误')
          // 请求失败关闭loading
          this.loginLoading = false
        })
      }
    }
  }
</script>
<style scoped>
.login-head{
    height: 57px;
    background: url('./logo_index.png') no-repeat;
    margin-bottom: 20px;
}
.login-container{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('./login_bg.jpg') no-repeat;
    background-size: cover;
}
.login-form{
    background: #fff;
    padding: 50px;
    min-width: 300px;
}
.loginBtn{
    width: 100%;
}
</style>
